import React from 'react';
import {
    Form,
    Table,
    Icon,
    Tag,
    Modal,
    Steps,
    Tabs,
    Badge,
    Button
} from 'antd'
import styles from './List.less'

const TabPane = Tabs.TabPane;

class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            ids:"",
            
        }
    }
    callback = e => {
        const { getAllMessage,getNewMessage } = this.props
        if(e == 0){
            getNewMessage()
        }else if(e == 1){
            getAllMessage()
        }
    }
    goDetails(value){
        if(JSON.parse(value.content).url){
            window.location = JSON.parse(value.content).url
        }
    }
    oneRead = () => {
        const { readOne,readAll } = this.props
        if(this.state.ids.length > 1){
            readAll()
        }else{
            const params = {
                messageId:this.state.ids[0].id
            }
            readOne(params)
        }
        
    }
    async pageChange(pagination) {
		await this.props.onPageChange(pagination);
		this.newPage = pagination.current;
    }
    async pageChange1(pagination) {
		await this.props.onPageChange1(pagination);
		this.newPage = pagination.current;
    }
    render() {
        const { list,pagination,list1,pagination1 } = this.props
        const columns = [
            {
                title: '标题',
                dataIndex: 'title',
                render: (text, record) => {
                    return (
                        <div className={styles.content} onClick={this.goDetails.bind(this,record)}>
                            <div className={styles.box} style={{ background: "#51CE8C" }}>
                                <Icon className={styles.icon} type="user" style={{ color: "white" }} />
                            </div>
                            <div className={styles.title}>
                                <h5 className={styles.h5}>
                                    {
                                        record.type == 1 ? "申请待审批" :
                                        record.type == 2 ? "审批结果通知" :
                                        "档案借阅到期"
                                    }
                                    <Badge dot={record.uid?false:true} style={{marginLeft:10}}>
                                
                                    </Badge> 
                                </h5>
                                <p>{JSON.parse(record.content).describe}</p>
                                
                            </div>
                            <div className={styles.time}>
                                {record.created_at.replace(/T/, " ").replace(/Z/, "")}
                            </div>
                        </div>
                    )
                }
            }
        ]

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                var idAry = []
                if(selectedRows){
                    selectedRows.map((item,i)=>{
                        idAry.push({id:item.id})
                    })
                }
                this.setState({ids:idAry})
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };
        return (
            <Tabs defaultActiveKey="0" onChange={this.callback}>
                <TabPane tab="未读" key="0">
                    <div style={{marginBottom:20}}>
                        <Button style={{ marginRight: 20 }} onClick={this.oneRead}>标记为已读</Button>
                        {/* <Button onClick={this.oneRead}>全部标记已读</Button> */}
                    </div>
                    <Table
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={list}
                        pagination={pagination}
                        showHeader={false}
                        onChange={this.pageChange.bind(this)}
                    />
                </TabPane>

                <TabPane tab="全部" key="1">
                    <Table
                        // rowSelection={rowSelection}
                        columns={columns}
                        dataSource={list1}
                        pagination={pagination1}
                        showHeader={false}
                        onChange={this.pageChange1.bind(this)}
                    />
                </TabPane>

            </Tabs>
        )
    }
}

export default List